import React from 'react';
import {View, ActivityIndicator, Text, StyleSheet, TouchableWithoutFeedback} from 'react-native';
import PropTypes from 'prop-types';
import RootSiblings from "react-native-root-siblings";

const styles = StyleSheet.create({
    modalStyle: {
        position: 'absolute',
        left: 0,
        right: 0,
        top: 0,
        bottom: 0,
        justifyContent: 'center',
        alignItems: 'center',
    },
    containerStyle: {
        backgroundColor: '#333',
        borderRadius: 6,
        padding: 20,
        minWidth: 60,
        minHeight: 60,
    },
    titleStyle: {
        justifyContent: 'center',
        alignItems: 'center',
        marginTop: 15
    },
    titleTextStyle: {
        fontSize: 14,
        textAlign: 'center'
    }
})

class ModalView extends React.Component {
    static propTypes = {
        title: PropTypes.string,
        indicatorColor: PropTypes.string,
        showModal: PropTypes.bool
    }

    static defaultProps = {
        indicatorColor: '#fff',
        showModal: false
    }

    render() {
        const {title, indicatorColor, showModal} = this.props;
        return (
            <View style={[styles.modalStyle, showModal && {backgroundColor: 'rgba(0,0,0,0.4)'}]}>
                <TouchableWithoutFeedback>
                    <View style={styles.containerStyle}>
                        <ActivityIndicator size={"large"} color={indicatorColor}/>
                        {
                            title ?
                                <View style={styles.titleStyle}>
                                    <Text style={[styles.titleTextStyle, {color: indicatorColor}]}>{title}</Text>
                                </View>
                                : null
                        }
                    </View>
                </TouchableWithoutFeedback>
            </View>
        )
    }
}

export {
    RootSiblings as SpinerManager,
};

let sibling = null;
export default class Spinner extends React.Component {
    static displayName = 'Spinner';
    static show = (title = null, options = {
        indicatorColor: '#fff',
        showModal: false
    }) => {
        sibling = new RootSiblings(
            <ModalView
                {...options}
                title={title}
            />
        )
    }

    static hide = () => {
        if (sibling instanceof RootSiblings) {
            sibling.destroy();
        }
    }

    render() {
        return null;
    }
}
